<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/resrt.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <title>Document</title>
</head>

<body>
    <nav id="nav">
        <img src="../img/1.jpg" alt="" class="mi_logo">
    </nav>
    <main id="mian">
        <header id="header">
            <div class="logo">
                <div class="left">
                    <img src="../img/logo-mi2.png" alt="">
                    <h2>小米账号</h2>
                </div>
                <ul class="ul">
                    <li><a href="#">用户协议</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">帮助中心</a><span>|</span></li>
                    <li class="xz"><a href="#">中文(简体)</a>
                        <div class="sanjx"></div>
                    </li>
                </ul>
            </div>
        </header>



        <!-- 下面切换的盒子 -->
        <div class="section">
            <div class="mi_layout__card">
                <!-- 登录  注册切换按钮 -->
                <div class="head">
                    <a href="#" class="a1">登录</a>
                    <a href="#" class="a2">注册</a>
                </div>

                <div class="mi_form">
                    <!-- 切换框 -->
                    <!-- 登录 -->
                    <div class="mi_form_content">
                        <div class="input_mi_input1">
                            <input type="text" placeholder="用户名" class="input1">
                            <p class="yan_username1"></p>
                        </div>

                        <div class="input_mi_input2">
                            <input type="text" placeholder="密码" class="input2">
                            <p class="yan_password1"></p>
                        </div>

                        <div class="mi_accept_terms">
                            <input type="checkbox" class="radio">
                            <span>已阅读并同意小米账号
                                <a href="#">用户协议</a>和
                                <a href="#">隐私政策</a>
                            </span>
                        </div>
                        <input type="button" class="button1" value="下一步">
                        <div class="mi_form_actions">
                            <span class="span1">忘记账号？</span>
                            <span class="span2">登录密码</span>
                        </div>
                    </div>

                    <!-- 注册 -->
                    <div class="form__content">
                        <div class="input_mi_input3">
                            <input type="text" placeholder="用户名" class="input3">
                            <p class="yan_username2"></p>
                        </div>

                        <div class="input_mi_input4">
                            <input type="text" placeholder="请输入密码" class="input4">
                            <p class="yan_password2"></p>
                        </div>

                        <div class="mi_form_field">
                            <input type="text" class="mi_form_field_control" placeholder="请输入验证码">
                            <input type="button" value="3562" placeholder="获取验证码" class="get_yanzma">
                        </div>

                        <div class="mi_accept_terms1">
                            <input type="checkbox" class="radio1">
                            <span>已阅读并同意小米账号
                                <a href="#">用户协议</a>和
                                <a href="#">隐私政策</a>
                            </span>
                        </div>
                        <input type="button" class="button2" value="注册">
                        <div class="mi_form_actions1">
                            <span class="span3">忘记账号？</span>
                            <span class="span4">登录密码</span>
                        </div>
                    </div>
                    <div class="mi_sns_login">
                        <p>其他方式登录</p>
                        <div class="ma">
                            <span class="iconfont icon-zhifubao1"></span>
                            <span class="iconfont icon-weixin-copy"></span>
                            <span class="iconfont icon-qq-copy"></span>
                            <span class="iconfont icon-weibo-copy"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</footer>
    </main>
</body>

</html>
<script src="../js/jquery.js"></script>
<script src="../js/login.js"></script>

<script>
    // 登录
    // 验证用户名
    $(".input_mi_input1").find(".input1").on("blur", () => {
        // console.log($(".input_mi_input1").find(".input1"));
        let reg = /^[\u4e00-\u9fa5]{2,6}$/;
        if (reg.test($(".input_mi_input1").find(".input1").val())) {
            $(".input_mi_input1").find(".input1").css({
                "border": "none"
            })
        } else {
            $(".input_mi_input1").find(".input1").css({
                "border": "1px solid #ff8540"
            })

            $(".yan_username1").html("亲，格式错误，输入2~6个中文字符")
            console.log($(".yan_username1"));

            $(".yan_username1").css({
                "color": "red"
            })
            flag = false;
        }
    })

    // // 验证密码
    $(".input2").on("blur", () => {
        // console.log($(".input2"));
        let regpass = /^[a-zA-Z]\w{6,12}$/;
        if (regpass.test($(".input2").val())) {
            $(".input2").css({
                "border": "none"
            })
            flag=true;
        } else {
            $(".input2").css({
                "border": "1px solid #ff8540"
            })

            $(".yan_password1").html("亲，格式错误,请重新输入")

            $(".yan_password1").css({
                "color": "red"
            })
            flag = false;
        }

    })

    // // 点击下一步按钮
    var flag = false;
    $(".button1").on("click", function () {
        if (!flag || $(".mi_accept_terms>input[type=checkbox]").prop("checked") == false) {
            $(".yan_password1").html("请勾选协议并填写正确的电话号码")
            // alert("请勾选协议并填写正确的电话号码")
        } else {
            $.post("../goodsAndShoppingCart/login.php", {
                "username": $(".input_mi_input1").find(".input1").val(),
                "userpass": $(".input2").val()

            }, function (data) {
                console.log(data);
                if (data == 1) {
                    setCookie("username", $(".input_mi_input1").find(".input1").val())
                    location.href = '../html/homepage.html'
                    alert("success")
                } else if (data == 0) {
                    oFormContent.style.display = "block";
                    oMiFormContent.style.display = "none"
                    A1.style.borderBottom = ""
                    A2.style.borderBottom = "#ff5c00 3px solid"
                    alert("用户名不存在，请注册")
                }
            })

        }
    })

    function setCookie() {
        let date = new Date();
        date.setDate(date.getDate() + parseInt(arguments[2]));
        document.cookie = arguments[0] + "=" + arguments[1] + ";expires=" + date;
    }








    // 注册验证
    let fla = false;
    $(".input_mi_input3").find(".input3").on("blur", () => {
        let reg = /^[\u4e00-\u9fa5]{2,6}$/;
        if (reg.test($(".input_mi_input3").find(".input3").val())) {
            $.get("../goodsAndShoppingCart/checkUser.php", {
                "username": $(".input_mi_input3").find(".input3").val(),
            }, function (data) {
                if (data == 1) {
                    fla = true;
                } else if (data == 0) {
                    fla = false;
                    $(".yan_username2").html("用户名已经存在，请换一个")
                    $(".yan_username2").css({
                        "color": "red"
                    })
                }
            })
            $(".input_mi_input3").find(".input3").css({
                border: "none"
            })
            fla = true;

        } else {
            $(".input_mi_input3").find(".input3").css({
                border: "1px solid orange"
            })
            fla = false;
        }
    })



    // $(".input_mi_input4").find("input").on("blur", () => {
    //         var reg=/^1(3|5|8|7)\d{9}$/

    //         // console.log($(".telphone").find("input"))

    //         if (reg.test($(".input_mi_input4").find("input").val())) {
    //             $(".input_mi_input4").find("input").css({
    //                 "border": "none"
    //             })
    //             fla = true;
    //         } else {
    //             $(".input_mi_input4").find("input").css({
    //                 "border": "1px solid orange"
    //             })
    //             fla = false;
    //         }
    //     })

    $(".input_mi_input4").find("input").on("blur", () => {
        // console.log($(".input2"));
        let regpass = /^[a-zA-Z]\w{6,12}$/;
        if (regpass.test($(".input_mi_input4").find("input").val())) {
            $(".input_mi_input4").find("input").css({
                "border": "none"
            })
        } else {
            $(".input_mi_input4").find("input").css({
                border: "1px solid orange"
            })

            $(".yan_password2").html("亲，格式错误,密码为已字母开头的6到12位")

            $(".yan_password2").css({
                "color": "red"
            })
            flag = false;
        }
        
    })

    // 点击提交
    $(".button2").click(function () {
        if (!fla || $(".mi_accept_terms1>input[type=checkbox]").prop("checked") == false || $(".input_mi_input4").find("input") == "" || $(".input_mi_input3").find(".input3") == "" || $(".mi_form_field_control").val() !== $(".get_yanzma").val() || $(".mi_form_field_control") == "") {
            $(".yan_password2").html("请填写正确的密码、验证码或者勾选协议")
            $(".yan_password2").css({
                "color":"red"
            })
        } else {
            $.post("../goodsAndShoppingCart/addUser.php", {
                "username": $(".input_mi_input3").find("input").val()
                , "userpass": $(".input_mi_input4").find("input").val()

            }, function (data) {
                console.log(data);
                if (data == 0) {
                    $(".yan_password2").html(" 注册失败")
                } else if (data == 1) {
                    location.href = '../html/login.html'
                    oFormContent.style.display = "block";
                    A1.style.borderBottom = "#ff5c00 3px solid"
                    oMiFormContent.style.display = "none"
                }
                fla = true;
            })
        }
    })


</script>
<!-- <script src="../html/login.html"></script> -->